<template>
  <div>
    <el-dialog
      :title="$t('email.editGroup')"
      :close-on-click-modal="false"
      width="340px"
      :visible.sync="this.dialogVisible"
      append-to-body
      @open="getInit"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item :label="$t('common.grouping')">
          <el-select
            v-model="groupId"
            class="filter-left"
            :placeholder="$t('common.select', [$t('common.grouping')])"
            filterable
            size="small"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitChangeGroup()">{{
          $t('permission.confirm')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAction,
  postAction,
  getUrlAction,
  postUrlAction,
} from '@/api/common'
export default {
  name: 'ChangeGroup',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Array,
      default: () => [], // 这里想要一个值类型,如果直接写[]就变成了引用类型
    },
  },
  components: {},
  created() {
    this.getInit()
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    },
  },
  data: function () {
    return {
      groupId: null,
      tableData: [],
      options: [],
      dialogVisible: this.show,
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    getInit() {
      getAction({}, 'EmailConfigGroup/GetGroupList').then((res) => {
        this.options = res.data
      })
    },
    handleClose() {
      this.$emit('update:show', false)
    },
    changeGroup() {
      this.showChangeGroupVisible = true
      console.log('changeGroup')
    },
    submitChangeGroup() {
      if (this.groupId == null) {
        this.$message({
          type: 'info',
          message: this.$t('email.pleaseSelectGroup'),
        })
        return false
      }
      postAction(
        { id: this.id, groupId: this.groupId },
        'EmailConfig/ChangeGroup'
      ).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: this.$t('email.editGroupSuccessfully'),
            type: 'success',
          })
          this.groupId = null
          this.handleClose()
          this.$emit('closeAction')
        } else {
          this.$message({
            message: this.$t('email.editGroupFailed'),
            type: 'warning',
          })
        }
      })
    },
  },
}
</script>

<style scoped></style>
